<template>
  <div id="app">
    <!-- 使用一个容器包裹内容，便于设置全局样式 -->
    <div class="app-container">
      <el-collapse-transition>
        <router-view></router-view>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 初始化 */
body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select, figure, figcaption {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, b, strong {
  font-size: 100%;
  font-weight: normal;
}

i, em {
  font-style: normal;
}

li {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

body, html {
  font: 14px "微软雅黑", Arial;
  color: #333;
}

input {
  outline: none;
}

.clearfix {
  *zoom: 1; /* 为了兼容 IE7 及更低版本 */
}

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* 基础布局样式 */
.app-container {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 移动端适配 - 使用媒体查询 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  body, html {
    font-size: 16px; /* 根据需要调整基础字体大小 */
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: 5px;
  }

  body, html {
    font-size: 14px; /* 更小屏幕上的字体大小 */
  }
}
</style>